<template>
  <div class="counter-container">
    <button type="button" class="btn btn-light btn-sm" @click="onsubclick">-</button>
    <input type="number" class="form-control form-control-sm ipt-number" v-model.number.lazy="num">
    <button type="button" class="btn btn-light btn-sm" @click="onaddclick">+</button>
       
  </div>
</template>

<script>
export default {
  name: 'EsCounter',
  emits: ['numchange'],
  props:{
    count: {
      type: Number,
      default: 0
    },
    min: {
      type: Number,
      default: NaN
    }
  },
  data() {
    return {
      num: this.count
    }
  },
  methods: {
    onsubclick() {
      if(!isNaN(this.min) && this.num - 1 < this.min) return
      this.num--
    },
    onaddclick() {
      this.num++
    }
  },
  watch: {
    num(newval) {
      const parseResult = parseInt(newval)
      if(isNaN(parseResult) || parseResult < 1) {
        this.num = 1
        return
      }
      if(String(newval).indexOf('.') != -1){
        this.num = parseResult
        return
      }
      this.$emit('numchange',this.num)
    }
  }
}
</script>

<style lang="less" scoped>
  .counter-container {
    display: flex;
    .btn {
      width: 25px;
    }
    .ipt-number{
      width: 34px;
      text-align: center;
      margin: 0 4px;
    }
  }
</style>